<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>西瓜后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/car_maintain.css" media="all">
</head>
<body>
<div class="layui-fluid" id="param">
    <div class="layui-card">
        <div class="layui-header">选择配置方式</div>
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="paramStyle">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">
                            <i class="icon"></i>
                            <span class="param_style_title">基本参数</span>
                            <span class="fr">
                                <a class="layui-btn layui-btn-radius layui-text-blue edit" lay-event="edit">编辑</a>
                                <a class="layui-btn layui-btn-radius layui-text-blue add" data-id="0">添加</a>
                                <a class="layui-btn layui-btn-radius layui-text-red del">删除</a>
                            </span>
                        </h2>
                        <div class="layui-colla-content layui-show">
                            <div class="layui-form-item radio_wrap">
                                <input type="hidden" class="radioChecked" value="" data-id="0">
                                <div class="param_radios">
                                    <input type="radio" name="base_param0" lay-filter="paramRadio0" title="品牌"/>
                                    <input type="hidden" name="hidden" value="">
                                </div>
                                <div class="param_radios">
                                    <input type="radio" name="base_param0" lay-filter="paramRadio0" title="级别"/>
                                    <input type="hidden" name="hidden" value="">
                                </div>
                                <div class="layui-form paramRadioAdd"  lay-filter="paramRadioAdd">

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">
                            <i class="icon"></i>
                            <span class="param_style_title">基本参数1</span>
                            <span class="fr">
                                <a class="layui-btn layui-btn-radius layui-text-blue edit" lay-event="edit">编辑</a>
                                <a class="layui-btn layui-btn-radius layui-text-blue add" data-id="0">添加</a>
                                <a class="layui-btn layui-btn-radius layui-text-red del">删除</a>
                            </span>
                        </h2>
                        <div class="layui-colla-content layui-show">
                            <div class="layui-form-item radio_wrap">
                                <input type="hidden" class="radioChecked" value="" data-id="1">
                                <div class="param_radios">
                                    <input type="radio" name="base_param1" lay-filter="paramRadio1" title="品牌"/>
                                    <input type="hidden" name="hidden" value="">
                                </div>
                                <div class="param_radios">
                                    <input type="radio" name="base_param1" lay-filter="paramRadio1" title="级别"/>
                                    <input type="hidden" name="hidden" value="">
                                </div>
                                <div class="layui-form paramRadioAdd"  lay-filter="paramRadioAdd">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="../../../layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        list: 'car_source/list', //list模块
    }).use(['index','list','form','jquery','layer'],function () {
        var $ = layui.$
            ,layer = layui.layer
            ,form = layui.form;
        $(".param_style_title").each(function () {
            $(this).click(function () {
                $(this).parent().parent().find(".layui-colla-content").toggleClass("layui-show")
            })
        })
        $(".edit").each(function () {
            $(this).click(function () {
                edit($(this))
            })
        })
        $(".add").each(function () {
            $(this).click(function () {
                var addTimes = parseInt($(this).attr("data-id"));
                var addtime = ++addTimes;
                $(this).attr("data-id",addtime);
                if($(this).attr("data-id") == 1){
                    add($(this))
                }else{
                    layer.msg("请输入添加参数！");
                    return;
                }
            })
        })
        $(".del").each(function () {
            $(this).click(function () {
                del($(this))
            })
        })
        function add(obj){
            var content = obj.parent().parent().parent().find(".layui-colla-content");
            var radioChecked = obj.parent().parent().parent().find(".radioChecked");
            var index = radioChecked.attr("data-id");
            content.append('<div class="layui-form-item addItem">\n' +
                '                                <div class="layui-input-inline">\n' +
                '                                    <input class="layui-input addParamValue" type="text" placeholder="请输入">\n' +
                '                                </div>\n' +
                '                                <div class="layui-input-inline my_skin">\n' +
                '                                    <a class="layui-layer-btn0 paramAddButton">确定</a>\n' +
                '                                </div>\n' +
                '                            </div>');
            var radioWrap = obj.parent().parent().parent().find(".radio_wrap");
            var paramAddButton = obj.parent().parent().parent().find(".paramAddButton")
            var addParamValue = obj.parent().parent().parent().find(".addParamValue");
            paramAddButton.click(function () {
                if(addParamValue.val() != ""){
                    radioWrap.children(".paramRadioAdd").append('<div class="param_radios">\n' +
                        '                                    <input type="radio" name="base_param'+index+'" lay-filter="paramRadio'+index+'" title="'+addParamValue.val()+'"/>\n' +
                        '                                    <input type="hidden" value="'+addParamValue.val()+'"/>\n' +
                        '                                </div>');
                    var addItem = obj.parent().parent().parent().find(".addItem");
                    obj.attr("data-id","0");
                    addItem.remove();
                   form.render('radio','paramRadioAdd')
                }else if(addParamValue.val() == ""){
                    layer.msg("请填写添加参数！");
                    return false
                }
            })
        };
        function edit(obj) {
            var content = obj.parent().parent().parent().find(".layui-colla-content");
            var radioValue = obj.parent().parent().parent().find(".radioChecked");
            var radio = content.find("input[type=radio]");
            var currentRadio;
            for(let i=0;i<radio.length;i++){
                if(radio[i].checked){
                    currentRadio = i
                }
            }

            radio.not(radio.eq(currentRadio)).each(function () {
                form.render("radio")
            })

            if(radioValue.val() != ""){
                content.find(".layui-form-radioed").children("div").html(
                    '                                <div class="layui-input-inline" style="width: auto">\n' +
                    '                                    <input class="layui-input editParamValue'+ currentRadio +'" type="text" value="'+ radioValue.val() +'">\n' +
                    '                                </div>\n' +
                    '                                <div class="layui-input-inline my_skin" style="width: auto">\n' +
                    '                                    <a class="layui-layer-btn0 paramButton'+ currentRadio +'">确定</a>\n' +
                    '                                </div>');
                var paramButton = obj.parent().parent().parent().find(".paramButton"+ currentRadio +"");
                var editParamValue = obj.parent().parent().parent().find(".editParamValue"+ currentRadio +"");
                paramButton.click(function(){
                    var layui_form_radioed = $(this).parent().parent().parent().parent().find(".layui-form-radioed");
                    layui_form_radioed.prev("input[type=radio]").attr("title",editParamValue.val())
                    layui_form_radioed.children("div").html(editParamValue.val())
                    layui_form_radioed.next("input[type=hidden]").val(editParamValue.val())
                })
            }else {
                layer.msg("请先选择要编辑的参数")
            }
        }
        function del(obj) {
            var radioValue = obj.parent().parent().parent().find(".radioChecked");
            var radioOthis = obj.parent().parent().parent().find(".layui-form-radioed");
            if(radioValue.val() != ""){
                var radioCurrent = radioOthis.prev();
                var br = radioOthis.prev().prev()
                radioOthis.remove();
                radioCurrent.remove();
                br.remove()
            }else {
                layer.msg("请先选择要删除的参数")
            }
        }
        for(let i=0;i<4;i++){
            form.on('radio(paramRadio'+ i +')', function(data){
                var radioValue = data.elem.getAttribute("title");
                $(".radioChecked").eq(i).val(radioValue);
            });
        }
    });
</script>
</body>
</html>